<template>
<div>
    <el-select v-model="prov" style="width:167px;margin-right: 25px;">
        <el-option v-for="option in arr" :key="option.name" :value="option.name">
            {{ option.name }}
        </el-option>
    </el-select>
    <el-select v-model="city" style="width:167px;margin-right: 25px;">
        <el-option v-for="option in cityArr" :key="option.name" :value="option.name">
            {{option.name }}
        </el-option>
    </el-select>
    <el-select v-model="district" v-if="district" style="width:167px;">
        <el-option v-for="option in districtArr" :key="option.name" :value="option.name">
            {{option.name }}
        </el-option>
    </el-select>
    <form class="biaodan">
        <div class="ZTinpt">
            <label>设备ID</label>
            <el-input placeholder="请输入"></el-input>
        </div>
        <div class="ZTinpt">
            <label>主机名称</label>
            <el-input placeholder="请输入"></el-input>
        </div>
        <div class="ZTinpt">
            <label>车牌自编号</label>
            <el-input placeholder="请输入"></el-input>
        </div>
        <div class="ZTinpt">
            <label>安装位置</label>
            <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="ZTinpt">
            <label>设备IP</label>
            <el-input placeholder="请输入"></el-input>
        </div>
        <div class="ZTinpt">
            <label>协议类型</label>
            <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="ZTinpt">
            <label>固件版本</label>
            <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="ZTinpt">
            <label>所属项目</label>
            <el-input placeholder="请输入"></el-input>
        </div>
        <div class="ZTinpt">
            <label>MAC地址</label>
            <el-input placeholder="请输入"></el-input>
        </div>
        <button>添加</button>

    </form>

    <div class="quyu">
        <div class="ZTinpt">
            <span>区域</span>
            <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="ZTinpt">
            <span>项目</span>
            <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="ZTinpt">
            <span>车牌号</span>
            <el-input class="chepai" placeholder="请填写车牌号"></el-input>
        </div>
        <button>重置</button>
        <button>查询</button>
        <div class="sq"></div>
    </div>
</div>
</template>

<script>
import area from './area.js'
export default {
    name: 'Cselect',
    data() {
        return {
            arr: area.arrAll,
            prov: '山东',
            city: '济南',
            district: '区域',
            cityArr: [],
            districtArr: [],
        }
    },
    methods: {
        updateCity: function () {
            for (var i in this.arr) {
                var obj = this.arr[i];
                if (obj.name) {
                    if (obj.name == this.prov) {
                        this.cityArr = obj.sub;
                        break;
                    }
                }
            }
            this.city = this.cityArr[1].name;
        },
        updateDistrict: function () {
            for (var i in this.cityArr) {
                var obj = this.cityArr[i];
                if (obj.name == this.city) {
                    this.districtArr = obj.sub;
                    break;
                }
            }
            if (this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) {
                this.district = this.districtArr[1].name;
            } else {
                this.district = '';
            }
        }
    },
    beforeMount() {
        this.updateCity();
        this.updateDistrict();

    },
    watch: {
        prov: function () {
            this.updateCity();
            this.updateDistrict();
        },
        city: function () {
            this.updateDistrict();
        }
    }

}
</script>

<style>
/* .ZTinpt > label {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 32px;
  color: rgba(0, 0, 0, 0.6);
}
.ZTinpt {
  width: 198px;
  padding-left: 16px;
  margin-top: 12px;
  margin-bottom: 12px;
  display: inline-block;
} */
.biaodan button:nth-of-type(1) {
    color: #3c74e3;
    background-size: 15px 15px;
    background-position: 14px 10px;
}

.biaodan button {
    float: right;
    width: 80px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    margin: 46px 100px 16px 8px;
    box-sizing: border-box;
    font-size: 14px;
    cursor: pointer;
}

.biaodan {
    width: 450px;
    margin-left: 200px;
    background-color: white;
    border-radius: 20px;
    padding: 20px;
}

.quyu {
    width: 216px;
    height: 364px;
    background-color: #ffffff;
    border-radius: 4px;
}

.ZTinpt>span {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.6);
    padding-left: 8px;
    padding-top: 16px;
}

.el-select>>>.el-input__inner,
.el-input>>>.el-input__inner {
    width: 200px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding-left: 8px;
    box-sizing: border-box;
}

.quyu button:nth-of-type(2) {
    color: #fff;
    background: url(../../static/img/serch.png) no-repeat #3c74e3;
    background-size: 15px 15px;
    background-position: 74px 10px;
    margin: 4px 8px 4px 8px;
}

.quyu button:nth-of-type(1) {
    background: url(../../static/img/sx.png) no-repeat #fff;
    background-size: 15px 15px;
    background-position: 74px 10px;
    margin: 16px 8px 4px 8px;
}

.quyu button {
    float: right;
    width: 200px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding-left: 26px;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFang SC;
    color: rgba(0, 0, 0, 0.6);
}

.sq {
    background: url(../../static/img/sq.png) no-repeat;
    width: 14px;
    height: 12px;
    background-size: 14px 12px;
    margin-left: 101px;
    margin-top: 120px;
}
</style>
